<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="wap-font-scale" content="no">
<meta name="renderer" content="webkit">
<title>AutoCode</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/links/jquery/jquery-3.5.1.min.js"></script>
<script src="/links/polyfill.min.js"></script>
<script src="/links/axios/axios.min.js"></script>
<script src="/links/vue/vue.min.js"></script>
<script src="/links/element-ui/index.js"></script>
<script src="/links/dayjs.min.js"></script>
<script src="/links/echarts/echarts.js"></script>
<script src="/links/JsBarcode.all.js"></script>
<script src="/links/qrcode.min.js"></script>
<script src="/links/layer/layer.js"></script>
<script src="/links/crypto/crypto-js.js"></script>
<script src="/js/dragController.js"></script>
<script src="/js/HttpApi.js"></script>
<script src="/js/AutoCode.js"></script>
<link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
<link href="/css/default.css" rel="stylesheet"/>
<link href="/css/dragController.css" rel="stylesheet"/>
    
    <style>
        
    </style>
</head>
<body>
<div id="app"  class="box " >
<div class="left " style="width:400px;">
<div class="flex ac-tree-head ac-tree-head-default-line">
    <div class="ac-tree-title">{{organMenus.title}}</div>
    <div class="ac-tree-oper">
        <el-button size="medium"  v-if="organMenus.operVisible.query==undefined || organMenus.operVisible.query" @click="organMenus_load()" :disabled="organMenus.operDisabled.query"  type="text"     native-type="button">刷新(Q)</el-button>

    </div>
</div>
<div class="ac-tree-content">
    <el-tree ref="organMenus" :data="organMenus.data"
    :expand-on-click-node="false" node-key="id" empty-text="内容为空"
    highlight-current :current-node-key="organMenus.currentNodeKey"  
       
    
      
       
    
    @current-change="organMenus_currentChange"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>
        <i class="el-icon-document" v-if="data.menuType==1"></i>
        <i class="el-icon-folder" v-else></i>

        {{ data.name }}
    </span>
    <span>
    </span>
</span>
</el-tree>

</div>
</div>
<div class="resize"></div>
<div class="right " style="width:calc(100% - 402px);">
<div class="flex ac-form-head ac-form-head-default-line">
    <div class="ac-form-title">{{menuInfo.title}}</div>
</div>
<div class="ac-form-content">
    <el-form class="ac-form-detail"    label-width="80px" label-position="right"
     size="mini" ref="menuInfo" :model="menuInfo.data" :rules="menuInfo.rules"  
     :disabled="menuInfo.disabled" @submit.native.prevent>
    <el-row><el-col :span=12 v-if="menuInfo.itemVisible.name==undefined || menuInfo.itemVisible.name">
    <el-form-item prop="name" label="菜单名称">
        {{menuInfo.data.name}}

    </el-form-item>
</el-col>
<el-col :span=12 v-if="menuInfo.itemVisible.icon==undefined || menuInfo.itemVisible.icon">
    <el-form-item prop="icon" label="菜单图标">
         <el-icon :class="menuInfo.data.icon"></el-icon>{{menuInfo.data.icon}}

    </el-form-item>
</el-col>
<el-col :span=12 v-if="menuInfo.itemVisible.url==undefined || menuInfo.itemVisible.url">
    <el-form-item prop="url" label="菜单URL">
         {{menuInfo.data.url}}

    </el-form-item>
</el-col>
<el-col :span=12 v-if="menuInfo.itemVisible.internalOrExternal==undefined || menuInfo.itemVisible.internalOrExternal">
    <el-form-item prop="internalOrExternal" label="打开方式">
        <template v-if="menuInfo.data.internalOrExternal=='0'">内部链接</template><template v-else-if="menuInfo.data.internalOrExternal=='1'">模板页面</template><template v-else-if="menuInfo.data.internalOrExternal=='2'">外部链接</template><template v-else>{{menuInfo.data.internalOrExternal}}</template>
    </el-form-item>
</el-col>
<el-col :span=12 v-if="menuInfo.itemVisible.calcName==undefined || menuInfo.itemVisible.calcName">
    <el-form-item prop="calcName" label="计算文本">
        {{menuInfo.data.calcName}}

    </el-form-item>
</el-col>
<el-col :span=12 v-if="menuInfo.itemVisible.paramAceEditor==undefined || menuInfo.itemVisible.paramAceEditor">
    <el-form-item prop="paramAceEditor" label="请求参数">
        <pre style="white-space: pre-wrap;">{{menuInfo.data.paramAceEditor}}</pre>

    </el-form-item>
</el-col>
<el-col :span=12 v-if="menuInfo.itemVisible.showName==undefined || menuInfo.itemVisible.showName">
    <el-form-item prop="showName" label="显示名称">
        {{menuInfo.data.showName}}

    </el-form-item>
</el-col>
</el-row>
 </el-form>

</div>
</div>



</div>

</body>
<script th:inline="javascript">
    let vm = new Vue({
            el: '#app',
            data() {
                return {"menuInfo":{"title":"权限信息","data":{},"operData":{},"operVisible":{},"operDisabled":{},"disabled":false,"editorForm":true,"itemVisible":{},"itemDisabled":{},"transfer":{},"rules":{}},"organMenus":{"title":"组织权限","data":[],"defaultCheckedKeys":[],"currentNodeKey":{},"operData":{"query":""},"operVisible":{},"operDisabled":{},"currentRow":{}},"page":{},"tabDisabled":{},"tabVisible":{},"customOptions":{},"dictOptions":{}}
            },
            watch: {
"menuInfo.data.url":function(newVal, oldVal) {
    if (this.menuInfo.data.id) {
        HttpApi.updateProvider("sysMenus", "url", this.menuInfo.data, function() {

        });
    }
}},
            methods: {
organMenus_check:function(node,list){
        
},
organMenus_currentChange: function(data,node){
    if(data){
        this.organMenus.currentNodeKey=data.id;
        this.organMenus.currentRow = data;
        this.menuInfo.editorForm=true;
this.menuInfo.operData.id=data.id;
this.menuInfo_load();

    }else{
        this.$data.organMenus.currentNodeKey=this.$options.data().organMenus.currentNodeKey;
        this.$data.organMenus.currentRow = this.$options.data().organMenus.currentRow;
        this.$data.menuInfo.operData=this.$options.data().menuInfo.operData;
this.$data.menuInfo.data=this.$options.data().menuInfo.data;

    }
},
menuInfo_load:function() {
    let that = this;
    HttpApi.queryObject("sysMenus", this.menuInfo.operData, function(res) {
        that.menuInfo.data = res;
    });
},
organMenus_allowDrag:function(node){
    
},
organMenus_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.stdSolReceiveHistory.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.stdSolReceiveHistory.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
organMenus_filterNodeMethod:function(value, data){
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
},
organMenus_allowDrop:function(draggingNode, dropNode, type){
    /*拖拽时判定目标节点能否被放置。
    type ：'prev'、'inner' 和 'next'，
    分别表示放置在目标节点前、插入至目标节点和放置在目标节点后*/
},
organMenus_load:function() {
    let that = this;
    HttpApi.post("/platform/menus/organMenus", that.organMenus.operData, function(res) {
        that.organMenus.data = res;
    });
},
menuInfo_change:function(fieldName) {
    if (fieldName == 'showName') {
        HttpApi.post("/platform/menus/saveOrganMenu", this.menuInfo.data, function() {

        });
    }
}
},
            mounted: function(){
    dragControllerLR();
    dragControllerUD();
},
            created: function() {
    let that = this;
    //获取字典信息
    HttpApi.dictOptions([], function(res) {
        that.dictOptions = res;
    });

    //加载自定义数据字典


    //加载初始化load
/*    this.menuInfo_load();*/
    this.organMenus_load();


    //加载初始化方法

}
    });
    

    
</script>
</html>
